<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="285px" style="margin-top: 50px">
        <el-tree
          ref="treeRef"
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          style="
            width: 200px;
            border: 0px solid #ccc;
            height: 870px;
            float: left;
          "
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
          check-change="handleCheckChange"
        />
      </el-aside>


      <el-main>
        <el-button
          style="
            background-color: #7acefe;
            border-color: #0ea3f7;
            color: #0ea3f7;
          "
          size="mini"
          @click="dialogFormVisible = true"
        >
          <el-icon style="color: #0ea3f7; border: 1px"><Plus /></el-icon
          >&emsp;新增
        </el-button>

        <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="departmentTreeName" label="部门名称" width="180" />
        <el-table-column prop="departmentDeactivatebool" label="部门停用" width="180" />
        <el-table-column prop="departAddress" label="部门区域" width="180" />
        <el-table-column prop="directSuperior" label="直接上级" width="180" />
        <el-table-column prop="departmentSupervisor" label="部门主管" width="180" />
        <el-table-column prop="inChargeHead" label="分管负责人" width="180" />
        <el-table-column prop="treasurer" label="财务负责人" width="180" />
        <el-table-column prop="viewablePersonnel" label="可查看人员" width="180" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click=""> 编辑 </el-button>
            <el-button size="small" type="danger" @click="">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>


      <div>
            <tr>
                <td>
                    <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" :background="true" layout="total, slot, prev, pager, next"
                        :total="formInline.totalCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" :background="true" layout="slot, sizes, jumper"
                        :total="formInline.totalCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </td>
            </tr>
        </div>
      </el-main>
    </el-container>
  </div>

 <!-- 部门信息弹出层 -->
 <div>
    <el-dialog v-model="dialogFormVisible" title="物料基本档添加" width="500">
      <el-form :model="form">

        <div class="m-4">
            <el-form-item label="直接上级">
            <el-cascader :options="options" :props="props1"
            v-model="form.departmentTreeId" @change="Handkechange"  clearable />
        </el-form-item>
        </div>

        <el-form-item label="部门停用">
          <el-radio-group v-model="form.departmentDeactivatebool">
                <el-radio value="启用">启用</el-radio>
                <el-radio value="禁用">禁用</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="部门类型">
            <el-select v-model="form.departmentType" placeholder="请选择">
                <el-option label="行政管理" value="行政管理" />
                <el-option label="生产加工" value="生产加工" />
                <el-option label="业务销售" value="业务销售" />
            </el-select>
            </el-form-item>

            <el-form-item label="部门名称">
            <el-input v-model="form.directSuperior" />
          </el-form-item>

          <el-form-item label="部门区域">
            <el-input v-model="form.departAddress" />
          </el-form-item>

          <el-form-item label="部门主管">
            <el-input v-model="form.departmentSupervisor" />
          </el-form-item>

          <el-form-item label="分管负责人">
            <el-input v-model="form.inChargeHead" />
          </el-form-item>

          <el-form-item label="财务负责人">
            <el-input v-model="form.treasurer" />
          </el-form-item>

          <el-form-item label="可查看人员">
            <el-input v-model="form.viewablePersonnel" />
          </el-form-item>

          <el-button type="primary" @click="AddDpart">
            确定
          </el-button>
          </el-form>
    </el-dialog>
  </div>

</template>

<script setup lang="ts">
import { reactive, ref, onMounted,computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import Cookie from "cookies-ts";
import axios from "axios";
const router = useRouter();
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
// const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
// const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
// const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
// const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020

const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.includes(value);
};

//树形级联
const defaultProps = {
  children: "children",
  label: "label"
};
//树形数据
var data = ref([]);
function GetBang() {
  axios({
    url: apiurls+"/api/Departments/DepartmentTreeQuery",
    method: "get"
  }).then((res) => {
    data.value = res.data.data;
    console.log(res.data.data, 111111);
  });
}
//获取部门树形数据
const uptform = reactive({
    departmentTreeName: "",
    pid: 0
});
const formInline = reactive({
    pageIndex: 1,
    pageSize: 3,
    pageCount: 0,
    totalCount: 0,

})

const tableData = ref([]);
let cc = 0;
const handleNodeClick = (data: any) => {
  console.log(data, 2222);
  uptform.departmentTreeName = data.label;
  cc = data.value;
  console.log(cc, 3333);
  GetData()
}
const GetData =()=>{
  console.log(cc, 4444);
  
  axios({
        url:apiurls+'/api/Departments/GetDeparementLists',
        method:'get',
        params:{
            departmentTreeId:cc,
            pageIndex:formInline.pageIndex,
            pageSize:formInline.pageSize
        }
    })
    .then((res)=>{
        tableData.value = res.data.data.list;
        formInline.pageCount = res.data.data.pageCount;
        formInline.totalCount = res.data.data.totalCount;
        console.log(res.data.data.list);
    })
}

//分页
const handleSizeChange = (val: number) => {
    formInline.pageSize = val;
    GetData()
}
const handleCurrentChange = (val: number) => {
    formInline.pageIndex = val;
    GetData()
}


 //绑定级联
 const props1 = {
  checkStrictly: true,
}
 const Handkechange = (value:any) => {
     form.departmentTreeId = value[1]
     console.log(value, 8888)
 }
 const options:any=ref([])
 const Getoptions = () => {
     axios({
       url:apiurls+'/api/Departments/DepartmentTreeQuery',
       method:'get'  
     }).then((res)=>{
       options.value = res.data.data
       console.log(res.data.data,777777777)
     })
 }

//部门添加数据
var form = reactive({
    departmentTreeId:'',
    departmentDeactivatebool:'',
    departmentType:'',
    departAddress:'',
    directSuperior:'',
    departmentSupervisor:'',
    inChargeHead:'',
    treasurer:'',
    viewablePersonnel:''
});

//添加部门
const dialogFormVisible = ref(false);
function AddDpart()
{
  if(form.departmentTreeId=="")
  {
      ElMessage.error("请选择直接上级")
      return
  }
  if(form.departmentDeactivatebool=="")
  {
      ElMessage.error("请选择部门停用")
      return
  }
  if(form.departmentType=="")
  {
      ElMessage.error("请选择部门类型")
      return
  }
  if(form.departAddress=="")
  {
      ElMessage.error("请选择部门部门区域")
      return
  }
  if(form.directSuperior=="")
  {
      ElMessage.error("请选择部门名称")
      return
  }
  if(form.departmentSupervisor=="")
  {
      ElMessage.error("请选择部门主管")
      return
  }
  if(form.inChargeHead=="")
  {
      ElMessage.error("请选择分管负责人")
      return
  }
  if(form.treasurer=="")
  {
      ElMessage.error("请选择财务负责人")
      return
  }
  if(form.viewablePersonnel=="")
  {
      ElMessage.error("请选择可查看人员")
      return
  }

    axios({
        url:bpiurls+'/api/Departs/DepartCreate',
        method:'post',
        data:form
    }).then((res)=>{
        if(res.data.code==0)
        {
            ElMessage.success("添加成功")
            dialogFormVisible.value = false
            GetData()
        }
        else
        {
            ElMessage.error("添加失败")
        }
    })
}

//就绪函数
onMounted(() => {
  //绑定树形
  GetBang();
  //级联
  Getoptions()
});
</script>
